<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 120px; padding-top: 50px;"></div>
    </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
import { get } from '@/utils/request'
import moment from 'moment'
export default {
    data() {
        return {
            title: '工程使用设备数量',
            Data: []
        }
    },
    methods: {
        // 封装加载图表方法
        loadLine() {
            const bar = new Bar(this.$refs.bottom4, {
                data:this.Data,
                xField: 'value',
                yField: 'type',
                height: 90, // 减少图表高度，让图表更小
            });

            bar.render();
        },
        // 请求后端数据 
        async getTempData() {
            let res = await get('/dashboard/queryEngineerBindDeviceNumber');
            console.log(res, '获取响应');

            this.Data = res.data.map(item => ({
                type: item.type
                    .replace('太原理工大学一号教学楼工程', '太原理工大学')
                    .replace('山西农大主体育', '山西农大'),
                value: item.value
            }));
        }
    },
    // 生命周期 vue实例与模板绑定完成 此时可以获取dom元素
    async mounted() {
        // 隐式创建微任务
        await this.getTempData();
        this.loadLine();
    }
}
</script>
<style scoped></style>
